<template>
  <div class="container">
    <!-- <nav-bar title="支付管理" /> -->
    <div class="list">
      <div class="item">
        <div class="tit">
          <h3>储蓄卡</h3>
        </div>
        <div @click="checkItem" class="wx-account" v-if="bankCardList.length">
          银行卡号: {{bankCardList[0].cardNo}}
          <i class="delete" @click.stop="deleteBankCard(bankCardList[0].id)">删除</i>
        </div>
        <router-link v-else to="/paymentAdd" class="add">
          <i></i>
          <p>添加银行卡</p>
        </router-link>
      </div>
      <!-- <div class="item">
        <div class="tit">
          <h3>支付宝</h3>
        </div>
        <div class="card">
          <div class="type-name">
            <div class="type">
              <img src='../../assets/img/alipay.png' />
              支付宝
            </div>
            <div class="name">*斌</div>
          </div>
          <div class="val">bin *** com</div>
          <em class="delete">&times;</em>
        </div>
        <router-link to="/paymentAdd" class="add">
          <i></i>
          <p>添加支付宝</p>
        </router-link>
      </div>
      <router-link to="/paymentAdd" class="item">
        <div class="tit">
          <h3>信用卡</h3>
        </div>
        <div class="add">
          <i></i>
          <p>添加信用卡</p>
        </div>
      </router-link> -->
      <!-- <router-link to="/paymentAdd" class="item"> -->
      <!-- <div class="item">
        <div class="tit">
          <h3>微信</h3>
        </div>
        <div class="wx-account">
          微信账号: <span v-if="wxInfo !== null">{{wxInfo.nickname}}</span>
        </div>
        <div class="add" v-if="wxInfo === null">
          <i></i>
          <p>添加微信</p>
        </div>
      </div> -->
      <!-- </router-link> -->

      <div class="item item-temp" v-if="wxInfo" style="display: none">
        <div class="tit">
          <h3>微信</h3>
        </div>
        <div class="wx-account">
          微信账号: 
          <img :src='wxInfo.headimgurl' />
          <span>{{wxInfo.nickname}}</span>
        </div>
      </div>
    </div>
    <!-- <div v-if="bankCardList.length" class="sure" @click="sure">确定</div> -->
    <div class="sure" @click="sure">返回</div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getBankCard, deleteBankCard } from '../../network/belong'
import {Toast, Dialog} from 'vant'

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      bankCardList: [],
      wxInfo: JSON.parse(localStorage.getItem('wxInfo'))
    }
  },
  mounted() {
    this.getBankCard()

    console.log('wxInfo: ', this.wxInfo)
    if(this.wxInfo){

    } else {
      
    }
  },
  methods: {
    sure(){
      this.$router.push('benefitWithdraw')
    },
    checkItem(){
      this.$router.push('benefitWithdraw')
    },
    getBankCard(){
      getBankCard(list => {
        this.bankCardList = list
      })
    },
    deleteBankCard(id){
      Dialog.confirm({
        message: '是否确认删除该银卡卡号?'
      }).then(() => {
        let requestData = {
          userkey: this.userKey,
          id,
        }
        deleteBankCard(requestData, () => {
          Toast({
            message: '删除成功',
            duration: 1000
          })
          this.getBankCard()
        })
      }).catch(() => {
        // on cancel
      })
    }
  },
}
</script>

<style scoped>
.list .item{
  display: block;
  padding: 15px 20px;
  margin-bottom: 10px;
  background-color: #ffffff;
}
.list .item .tit{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
}
.list .item i{
  font-size: 14px;
  color: #666;
}
.add{
  height: 40px;
  border: 1px dashed #e4e4e4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #999999;
  margin-top: 10px;
}
.add i{
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
}
.add i:before,
.add i:after{
  display: block;
  content: '';
  width: 10px;
  height: 2px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1px 0 0 -5px;
  background-color: #999;
}
.add i:after{
  height: 10px;
  width: 2px;
  margin: -5px 0 0 -1px;
}
.add p{
  line-height: 2.2;
}
.card{
  position: relative;
  color: #ffffff;
  padding: 20px;
  border-radius: 3px;
  margin-top: 10px;
  background-image: linear-gradient(#51a6e1, #458edf)
}
.card .type-name{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .type{
  display: flex;
  align-items: center;
}
.card .type img{
  width: 30px;
  height: 30px;
  padding: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #fff;
}
.card .name{
  opacity: .7;
  font-size: 14px;
}
.card .val{
  text-align: right;
  font-size: 24px;
  line-height: 1.6;
  padding-top: 10px;
}
.card .delete{
  position: absolute;
  right: -6px;
  top: -6px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 18px;
  color: #fff;
  border-radius: 50%;
  background-color: #333;
}
.wx-account{
  display: flex;
  align-items: center;
  padding-top: 10px;
}
.wx-account img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 20px;
}
.list .item i.delete{
  padding: 3px 5px;
  color: #fff;
  border-radius: 3px;
  margin-left: 20px;
  font-size: 12px;
  background-color: #d50721;
}
.sure{
  position: fixed;
  bottom: 40px;
  left: 20px;
  right: 20px;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
  font-size: 16px;
  border-radius: 50px;
  background-color: #000000;
}
</style>